<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(p,i) of person" :key="p.id">
        {{i}} - {{p.name}} - {{p.age}}
      </li>
    </ul>
    <ul>
      <li v-for="value,key,index of obj">
        {{index}} - {{key}} : {{value}}
      </li>
    </ul>
    <div>
      {{info}}
    </div>
    <ul>
      <li v-for="n in evenNum">
        {{n}}
      </li>
    </ul>

    <div>
      <span v-for="n in 10">{{ n }} </span>
    </div>

    <template v-for="n in 3">
      <div>a</div>
      <div>b</div>
    </template>

    <div>
      {{arr}}
    </div>
    
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        person: [
          {
            id: '001', name: 'aaa', age: 18
          },
          {
            id: '002', name: 'bbb', age: 19
          },
          {
            id: '003', name: 'ccc', age: 20
          },
          {
            id: '004', name: 'ddd', age: 21
          }
        ],
        info: ['a', 'b', 'c'],
        num: [1, 3, 4, 6, 100, 300],
        obj: {
          x: 100,
          y: true,
          z: 'abc'
        },
        arr: ['aa', 'bb']
      },
      computed: {
        evenNum() {
          return this.num.filter(n => n % 2 === 0)
        }
      },
      mounted() {
        // this.obj.w = 100
        this.$set(this.obj, 'w', 100)
      },
    })
  </script>
</body>
</html>